<template>
  <my-div class="word">
     <!-- <div class="head_top wrapper">
        <image style="width:30px;height:30px;" src="root:img/share/close@2x.png"></image>
    </div> -->
    <div class="beifen">
      <image style="width:58px;height:65px;" src="root:img/create/biji@2x.png"></image>
      <my-text :text="$t('login.trueWord')" day_color="rgba(19,32,63,1)" night_color="rgba(102,102,102,1)" style="font-size:36px;margin-top:24px;"></my-text>
      <text class="attention">{{$t('login.pleasesave_word')}}</text>
      <div class="word-c">
        <text class="zhujici">{{text}}</text>
      </div>
      <div class="word-wrapper">
        <div v-for="(item,key) of master_keys" :key="key"   class="word-wrapper-item" :style="[{'margin-left':(key%4) === 0? 0: '20px'}]" @click="wxcButtonClicked(item)">
          <text style="text-align: center;line-height: 60px;font-size:'28px'" :style="[{color:item.isChecked?'rgba(70,120,245,1)':'rgba(102,102,102,1)'}]">{{item.key}}</text>
        </div>
      </div>
    </div>
    <div class="login-btn" @click="finish">
      <text style="color:#ffffff;font-size:24px;text-align: center;line-height:74px;
      ">{{$t('login.finish')}}</text>
    </div>
  </my-div>
</template>

<script>
import { WxcButton } from 'weex-ui'
const pref = weex.requireModule('pref')
export default {
  name: '',
  data() {
    return {
      master_keys:[],
      text:''
    }
  },
  components: {WxcButton},
  created() {
    const q = this.$route.query
    const keys = q.master_key.split(' ')
     keys.forEach(ele => {
        this.master_keys.push({
          key:ele,
          isChecked:false
        })
      });
    //  this.master_keys.sort((a,b)=>{
    //     const m = this.sort_word(a.key).charCodeAt()
    //     const n = this.sort_word(b.key).charCodeAt()
    //       return m - n
    //   })
  },
  methods: {
    // 点击助记词
    wxcButtonClicked(e){
      if(e.isChecked) return
      this.text += e.key + ' '
      e.isChecked = true
      // 助记词排序算法
      this.master_keys.sort((a,b)=>{
        // 安卓不自主计算字符ASCII值
        const m = this.sort_word(a.key).charCodeAt()
        const n = this.sort_word(b.key).charCodeAt()
        return m - n
      })
    },
    // 随机从单词中选择一个字母
    sort_word(word){
      const l = word.length
      const s = Math.floor(Math.random()*l)
      return word.toLowerCase().substring(s,s+1)
    },
    // 确认完成
    finish(){
      var param = this.$route.query || this.master_keys;
      if(this.text.trim() !== param.master_key) {
        this.text = ''
        this.master_keys.forEach(item => {
          item.isChecked = false
        })
        this.toast(this.$t('wallet.sure_word'))
      }else {
        this.save_userInfo()

      }
    },
    save_userInfo(){
      var param = this.$route.query;
      const device = weex.requireModule('device')
         const p = {
           name:param.name,
           account_id:param.account_id,
           device_id: '',
           public_key_hex:param.public_key_hex,
           master_seed:param.master_seed,
           referral:param.inviter
        }
        this.$progress.show()
        this.$ajax.post('/api/wallet/saveUserInfo',p).then(
          (res)=>{
            const data =res.data
           this.$progress.dismiss()
           if(data.code === 0){
              this.$router.push('/h5/download.js')
           }else {
             this.toast('确认失败')
           }
         
        }
        )
      
    }
  }
}
</script>
<style scoped>
.wraper{
  display: flex;
  flex-direction: row;
}
.head_top{
  width: 750px;
  padding-left: 30px;
  padding-right: 30px;
  height: 100px;
  justify-content: center;
}
.word{
  position: absolute;
  top: 0;
  bottom: 0;
  flex:1;
}
.beifen{
  margin-top: 80px;
  width: 750px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.attention{
  margin-top: 68px;
  font-size: 28px;
  color: rgba(102,102,102,1);
}
.word-c{
  width: 690px;
  background-color: rgba(70,120,245,0.1);
  padding-top: 44px;
  padding-left: 18px;
  padding-bottom: 44px;
  margin-top: 28px;
  border-radius: 20px;
  padding-right: 18px;
  min-height: 210px;
}
.zhujici{
  font-size: 28px;
  color: rgba(102,102,102,1);
  line-height: 48px;
}
.login-btn{
  width: 690px;
  height: 80px;
  background-color: rgba(70,120,245,1);
  margin-top: 100px;
  border-radius: 10px;
  position: absolute;
  bottom: 140px;
  left: 30px;
}
.word-wrapper{
  width: 690px;
  margin-top: 40px;
  display: flex;
  flex-direction: row;
  flex-wrap:wrap;
  /* justify-content: space-between; */
}
.word-wrapper-item{
  width: 156px;
  height: 60px;
  margin-bottom: 20px;
  border-width: 1px;
  border-style:solid;
  border-color: #cccccc;
  border-radius: 8px;

}

.is-active{

}
</style>
